<template>
  <div>
   <div class="bbb">
     <el-row>
       <el-col :span="6">
         <el-input placeholder="请输入公告名" v-model="searchName" prefix-icon="el-icon-search"></el-input>
       </el-col>
       <el-col :span="2">
         <el-button type="primary" @click="search">搜索</el-button>
       </el-col>
       <el-col :span="2">
         <el-button type="primary" @click="openAddDialog">新增公告</el-button>
       </el-col>
     </el-row>
   </div>
    <el-table :data="bulletinList || []" style="width: 100%">
      <el-table-column type="selection"></el-table-column>
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="bulletinName" label="公告名称"></el-table-column>
      <el-table-column prop="bulletinContent" label="公告内容"></el-table-column>
      <el-table-column prop="publicTime" label="公告时间" format="yyyy-MM-dd"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="link" size="small" @click="openEditDialog(scope.row.id)">编辑</el-button>
          <el-button type="text" size="small" @click="deleteBulletin(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total || 0">
    </el-pagination>
    <el-dialog :title="dialogTitle" v-model="dialogVisible">
      <el-form :model="form" :rules="rules" ref="formRef">
        <el-form-item label="公告名称" prop="bulletinName">
          <el-input v-model="form.bulletinName"></el-input>
        </el-form-item>
        <el-form-item label="公告内容" prop="bulletinContent">
          <el-input v-model="form.bulletinContent"></el-input>
        </el-form-item>
        <el-form-item label="公告时间" prop="publicTime">
          <el-date-picker v-model="form.publicTime" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveBulletin">确 定</el-button>
      </template>
    </el-dialog>
    <el-dialog :title="editDialogTitle" v-model="editDialogVisible">
      <el-form :model="editForm" :rules="editRules">
        <el-form-item label="公告名称" prop="bulletinName">
          <el-input v-model="editForm.bulletinName"></el-input>
        </el-form-item>
        <el-form-item label="公告内容" prop="bulletinContent">
          <el-input v-model="editForm.bulletinContent"></el-input>
        </el-form-item>
        <el-form-item label="公告时间" prop="publicTime">
          <el-date-picker v-model="editForm.publicTime" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveEditForm">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus';

// 搜索相关
const searchName = ref('');
// 公告列表数据
const bulletinList = ref([]);
// 当前页码
const currentPage = ref(1);
// 每页数量
const pageSize = ref(5);
// 总记录数
const total = ref(null);
// 对话框相关
const dialogVisible = ref(false);
const dialogTitle = ref('');
const form = ref({
  id: null,
  bulletinName: '',
  bulletinContent: '',
  publicTime: null
});
const formRef = ref(null);
const rules = {
  bulletinName: [
    { required: true, message: '请输入公告名称', trigger: 'blur' }
  ],
  bulletinContent: [
    { required: true, message: '请输入公告内容', trigger: 'blur' }
  ],
  publicTime: [
    { required: true, message: '请选择公告时间', trigger: 'change' }
  ]
};

// 新增的编辑对话框相关
const editDialogVisible = ref(false);
const editDialogTitle = ref('');
const editForm = ref({
  id: null,
  bulletinName: '',
  bulletinContent: '',
  publicTime: null
});
const editRules = {
  bulletinName: [
    { required: true, message: '请输入公告名称', trigger: 'blur' }
  ],
  bulletinContent: [
    { required: true, message: '请输入公告内容', trigger: 'blur' }
  ],
  publicTime: [
    { required: true, message: '请选择公告时间', trigger: 'change' }
  ]
};

// 获取分页列表
const getList = async () => {
  try {
    let res;
    if (searchName.value) {
      res = await axios.get(`http://localhost:8080/bulletin/page/${currentPage.value}/${pageSize.value}/keyword/${searchName.value}`);
    } else {
      res = await axios.get(`http://localhost:8080/bulletin/page/${currentPage.value}/${pageSize.value}`);
    }
    bulletinList.value = res.data.data.rows;
    total.value = res.data.data.total;
  } catch (error) {
    console.error('接口请求失败', error);
    ElMessage.error('获取公告列表失败，请检查网络或重试');
  }
};

// 页码改变
const handleCurrentChange = async (val) => {
  currentPage.value = val;
  await getList();
};

// 每页数量改变
const handleSizeChange = async (val) => {
  pageSize.value = val;
  await getList();
};

// 打开新增对话框
const openAddDialog = () => {
  dialogTitle.value = '新增公告';
  form.value = {
    id: null,
    bulletinName: '',
    bulletinContent: '',
    publicTime: null
  };
  dialogVisible.value = true;
};

// 打开编辑对话框
const openEditDialog = (row) => {
  console.log(111);

  console.log(editDialogVisible.value)
  editDialogTitle.value = '编辑公告';
  editForm.value = {...row};
  editDialogVisible.value = true;

};

// 保存公告
const saveBulletin = async () => {
  try {
    let res;
    if (form.value.id) {
      res = await axios.put('http://localhost:8080/bulletin', form.value);
    } else {
      res = await axios.post('http://localhost:8080/bulletin', form.value);
    }
    if (res.data.code === 1) {
      dialogVisible.value = false;
      await getList();
    } else {
      ElMessage.error(res.data.msg || '保存公告失败');
    }
  } catch (error) {
    console.error('保存公告失败', error);
    ElMessage.error('保存公告失败，请检查网络或重试');
  }
};

// 保存编辑后的表单
const saveEditForm = async () => {
  try {
    let res;
    if (editForm.value.id) {
      res = await axios.put('http://localhost:8080/bulletin', editForm.value);
    } else {
      res = await axios.post('http://localhost:8080/bulletin', editForm.value);
    }
    if (res.data.code === 1) {
      editDialogVisible.value = false;
      await getList();
    } else {
      ElMessage.error(res.data.msg || '保存编辑内容失败');
    }
  } catch (error) {
    console.error('保存编辑内容失败', error);
    ElMessage.error('保存编辑内容失败，请检查网络或重试');
  }
};

// 删除公告
const deleteBulletin = async (id) => {
  try {
    const res = await axios.delete(`http://localhost:8080/bulletin/${id}`);
    if (res.data.code === 1) {
      await getList();
    } else {
      ElMessage.error(res.data.msg || '删除公告失败');
    }
  } catch (error) {
    console.error('删除公告失败', error);
    ElMessage.error('删除公告失败，请检查网络或重试');
  }
};

// 搜索
const search = async () => {
  currentPage.value = 1;
  await getList();
};

onMounted(() => {
  getList();

});
</script>

<style scoped>
.bbb{
  margin-bottom: 10px;
}
</style>
